<template>
	<view :style="colorStyle">
		<view class='header'>
			<view class='currentScore'>{{type | renderType}}</view>
			<view class="scoreNum">{{renderNum(type)}}</view>
			<view class='line'></view>
		</view>
		<view class='commission-details'>
			<timeSlot @changeTime="changeTime"></timeSlot>
			<view class='sign-record' @click="getRecordList">
				<block v-if="recordList.length>0">
					<view class='list'>
						<view class='item'>
							<view class='listn'>
								<block v-for="(item,index) in recordList" :key="index">
									<view class='itemn acea-row row-between-wrapper'>
										<view class="title">
											<view class='name line1'>{{item.title}}
											</view>
											<view>{{item.add_time}}</view>
											<view class="fail-msg" v-if="item.mark">
												{{item.mark}}
											</view>
										</view>
										<view class='num font-color' v-if="item.pm == 1">+{{item.number}}</view>
										<view class='num' v-else>-{{item.number}}</view>
									</view>

								</block>
							</view>
						</view>
					</view>
				</block>
				<view class='loadingicon acea-row row-center-wrapper' v-if="recordList.length">
					<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>{{loadTitle}}
				</view>
				<view v-if="recordList.length < 1 && page > 1">
					<emptyPage :title='$t(`暂无数据~`)'></emptyPage>
				</view>
			</view>
		</view>
		<!-- #ifdef H5 -->
		<home></home>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/user.js';
	import timeSlot from "@/components/timeSlot/index"
	import {
		userbilllog
	} from '@/api/user.js';
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	// #ifdef MP
	import authorize from '@/components/Authorize';
	// #endif
	import emptyPage from '@/components/emptyPage.vue'
	import home from '@/components/home';
	import colors from '@/mixins/color.js';
	export default {
		components: {
			// #ifdef MP
			authorize,
			// #endif
			emptyPage,
			home,
			timeSlot
		},
		mixins: [colors],
		filters: {
			renderType(type) {
				let text = '';
				switch (type) {
					case 'splicing':
						text = `拼单次数`;
						break;
					case 'direct':
						text = `直购次数`;
						break;
					case 'integral':
						text = `积分`;
						break;
					case 'diamond':
						text = `钻石`;
						break;
					case 'universal':
						text = `通用券`;
						break;
					case 'limited':
						text = `限时券`;
						break;
					default:
						text = '未知类型';
				}
				return text;
			}
		},
		data() {
			return {
				name: '',
				type: 0,
				page: 1,
				limit: 15,
				loading: false,
				loadend: false,
				loadTitle: this.$t(`加载更多`),
				recordList: [],
				recordType: 0,
				recordCount: 0,
				extractCount: 0,
				times: [],
				start: "",
				stop: "",
				userInfo: {}
			};
		},
		computed: mapGetters(['isLogin']),
		onLoad(options) {
			if (this.isLogin) {
				this.type = options.type;
				this.getRecordList();
			} else {
				toLogin();
			}
		},
		onShow: function() {
			let type = this.type;
			this.getUserInfo();
		},
		methods: {
			renderNum(type){
				let text = '';
				switch (type) {
					case 'splicing':
						text = this.userInfo.splicing_number;
						break;
					case 'direct':
						text = this.userInfo.direct_number;
						break;
					case 'integral':
						text = this.userInfo.integral;
						break;
					case 'diamond':
						text = this.userInfo.diamond;
						break;
					case 'universal':
						text = this.userInfo.universal_volume;
						break;
					case 'limited':
						text = this.userInfo.limited_volume;
						break;
					default:
						text = '未知类型';
				}
				return text;
			},
			getUserInfo: function() {
				let that = this;
				getUserInfo().then(res => {
					that.userInfo = res.data;
				});
			},
			changeTime(time) {
				console.log("time", time);
				this.start = time.start ? this.formatTimestamp(time.start) : "";
				this.stop = time.stop ? this.formatTimestamp(time.stop) : "";
				this.page = 1;
				this.loading = false;
				this.loadend = false;
				this.recordList = [];
				this.getRecordList();
			},
			formatTimestamp(timestamp) {
				let date = new Date(timestamp * 1000);
				let year = date.getFullYear();
				let month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从 0 开始，需要加 1
				let day = date.getDate().toString().padStart(2, '0');
				return `${year}/${month}/${day}`;
			},
			getRecordList: function() {
				let that = this;
				let page = that.page;
				let limit = that.limit;
				if (that.loading) return;
				if (that.loadend) return;
				that.loading = true;
				that.loadTitle = '';
				console.log("时间", this.start ? `${this.start}-${this.stop}` : '');
				userbilllog({
					page: page,
					limit: limit,
					category: this.type,
					time: this.start ? `${this.start}-${this.stop}` : ''
				}).then(res => {
					this.recordList.push(...res.data.list);
					let loadend = res.data.list.length < that.limit;
					that.loadend = loadend;
					that.loadTitle = loadend ? that.$t(`我也是有底线的`) : that.$t(`加载更多`);
					that.page += 1;
					that.loading = false;
				}).catch(err => {
					that.loading = false;
					that.loadTitle = that.$t(`加载更多`);
				})
			}
		},
		onReachBottom: function() {
			this.getRecordList();
		}
	}
</script>

<style scoped lang="scss">
	.commission-details .promoterHeader .headerCon .money {
		font-size: 36rpx;
	}

	.commission-details .promoterHeader .headerCon .money .num {
		font-family: 'Guildford Pro';
	}

	.sign-record .list .item .listn .itemn .name {
		width: 100%;
		// max-width: 100%;
		white-space: break-spaces;
	}

	.sign-record .list .item .listn .itemn .title {
		padding-right: 30rpx;
		flex: 1;
	}

	.header {
		// background-image: url('');
		background-repeat: no-repeat;
		background-size: 100% 100%;
		width: 100%;
		height: 260rpx;
		font-size: 72rpx;
		color: #fff;
		padding: 31rpx 0 45rpx 0;
		box-sizing: border-box;
		text-align: center;
		font-family: 'Guildford Pro';
		background-color: var(--view-theme);
	}
	
	.header .currentScore {
		font-size: 26rpx;
		color: rgba(255, 255, 255, 0.8);
		text-align: center;
		margin-bottom: 11rpx;
	}
	
	.header .scoreNum {
		font-family: "Guildford Pro";
	}
</style>